<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h3>课程管理</h3>
        <el-form
          :inline="true"
          :model="selDataForm"
          class="demo-form-inline"
          size="small"
        >
          <el-form-item label="课程名称" prop="courseName">
            <el-input
              v-model="selDataForm.courseName"
              placeholder="请输入课程名称"
            ></el-input>
          </el-form-item >
          <el-form-item label="状态" prop="status">
            <el-select v-model="selDataForm.status">
                <el-option :value="null" label="全部"></el-option>
                <el-option value="0" label="上架"></el-option>
                <el-option value="1" label="下架"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="selTableData"
              >查询</el-button>
          </el-form-item>
          <el-button  type="primary" style="float:right" icon="el-icon-plus"  size="small" @click="addCrouse(-1)">新建课程</el-button>
        </el-form>

      </div>

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        align="center"
       >
      </el-table-column>
      <el-table-column
        prop="courseName"
        label="课程名称"
        align="center"
       >
      </el-table-column>
      <el-table-column
        prop="price"
        align="center"
        label="价格">
      </el-table-column>
      <el-table-column
        prop="sortNum"
        align="center"
        label="排序">
      </el-table-column>
      <el-table-column
        align="center"
        label="状态">
        <template slot-scope="scope">
            <div v-if="scope.row.status=='1'" class="greenRound" />
            <div v-else class="redRound" />
        </template>
      </el-table-column>

      <el-table-column
      align="center"
      width="260"
        label="操作">
        <template slot-scope="scope">
            <div>
            <el-button v-if="scope.row.status=='0'" type='success' size="mini" @click="onChangeState(1,scope.row.id)">上架</el-button>
            <el-button v-else type='danger' size="mini" @click="onChangeState(0,scope.row.id)">下架</el-button>
            <el-button type='' size="mini" @click="addCrouse(scope.row.id)">编辑</el-button>
            <el-button type='' size="mini" @click="$router.push({name:'course-section',params:{id:scope.row.id}})">内容管理</el-button>
            </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
  background
  layout="total, sizes, prev, pager, next, jumper"
  :total="page.total"
  :page-size="page.size"
  :current-page="page.current"
  @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
</el-pagination>
    </el-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getQueryCourses, changeState } from '@/service/crouse'
export default Vue.extend({
  data () {
    return {
      selDataForm: {},
      page: {
        current: 1,
        size: 2,
        total: 0
      },
      tableData: []
    }
  },
  mounted () {
    this.selTableData(true)
  },
  methods: {
    async selTableData (flag:boolean) {
      if (flag) {
        this.page.current = 1
      }
      const selData = { ...this.selDataForm, pageSize: 0, currentPage: 0 }

      selData.pageSize = this.page.size
      selData.currentPage = this.page.current
      const { data } = await getQueryCourses({ ...selData })
      console.log(data)
      if (data.state === 1) {
        this.tableData = data.content.records
        this.page.total = parseInt(data.content.total)
      }
    },
    handleSizeChange (val:number) {
      this.page.size = val
      this.selTableData(true)
    },
    handleCurrentChange (val:number) {
      this.page.current = val
      this.selTableData(false)
    },
    async onChangeState (state:number, id:number) {
      const { data } = await changeState({ courseId: id, status: state })
      if (data.code === '000000') {
        this.selTableData(false)
      }
    },
    addCrouse (id:any) {
      this.$router.push({ name: 'editCourse', params: { id: id } })
    }
  }
})
</script>

<style lang="scss" scoped>
.dialogDivClass {
  width: 50%;
  min-width: 300px;
  margin: 0 auto;
}
.redRound {
  background-color: red;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  margin: 0 auto;
}
.greenRound {
  background-color: #51cf66;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  margin: 0 auto;
}
</style>
